<template>
  <div class="search-wrap">
    <div class="search-head">
      <div class="search-box">
        <div class="search-con">
          <img src="../../images/search.png" class="logo" onclick="return false"/>
          <input type="text" class="search" placeholder="请输入企业名称或关键字" v-model="keyword" maxlength="20"/>
          <img src="../../images/del.png" class="clear" v-show="showIcon" @click="del" onclick="return false">
        </div>
        <div class="search-btn" @click="search">搜索</div>
      </div>
      <div class="title-box">{{title}}</div>
    </div>


    <!--招工列表-->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      class="work-van" v-if="showData == 1"
    >
      <div class="work-box">
        <div class="work-list">

          <div class="work-con" v-for="(item,index) in workList" :key="index" @click="openRecruit(item.id)">
            <div class="logo-box">
              <img :src="item.mechanismUrl?item.mechanismUrl:require('./pic.png')" class="logo" onclick="return false"/>
              <div class="title" v-show="item.isApply == 0">已报名</div>
            </div>
            <div class="company-box">
              <div class="name">{{item.mechanismName}}</div>
              <workstar :score="item.mechanismScore/2" class="star"></workstar>
              <div class="key-box">
                    <span class="key" v-if="item.key.length>0" v-for="(val,index) in item.key"
                          :key="index">{{val}}</span>
              </div>
              <div class="work-name">{{item.workTypeName}}</div>
              <div class="score-box">
                <span>招{{item.maxNumber}}人</span>&nbsp;<span v-if="item.status != 1">/&nbsp;已报名{{item.applyNumber}}人</span>
                <span class="full" v-if="item.status == 1">待招聘</span>
              </div>
            </div>
            <div class="num-box">
              <div class="fee" v-show="item.reStatus == 1 && item.reMoney > 0">
                <img src="./return.png" class="fee-pic"/>
                <span class="fee-money">{{item.reMoney}}</span>
              </div>
              <div class="lend" v-show="item.lendType == 1">可借支</div>
              <div class="money" v-if="item.postType == 1">{{item.workMoney}}元/小时</div>
              <div class="money" v-if="item.postType == 0">{{item.wageRange}}元/月</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">搜索尚无结果，更多企业正在洽谈中，敬请期待！</div>
      </div>
    </div>


    <div class="content-box" v-if="showData == 0 && hisItem.length > 0">
      <div class="content-list">
        <div class="content" v-for="(item,index) in hisItem" :key="index" @click="queryWork(item)">{{item}}</div>
      </div>
      <div class="clear-box">
        <div class="clear-con" @click="clear">
          <img src="./clear.png" class="clear" onclick="return false"/>
          <span class="title">清空历史记录</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import workstar from "../../components/star/workstar"
  import {baseUrl} from "../../common/js/env"

  export default {
    data() {
      return {
        showData: 0,
        keyword: "",
        showIcon: false,
        hisTime: [],//搜索时间
        hisItem: [],//搜索内容,
        title: "历史搜索",
        workList: [],
        currentPage: 1,
        pageSize: 20,
        identity: "",
        userSign: "",
        loading: false,
        finished: false,
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.init();
    },
    methods: {
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.queryResult();
        }, 500);
      },
      queryResult() {//查询招聘列表
        this.axios.get(baseUrl + "/work/query_worklist?sgin=" + this.userSign + "&mechanismAddress=" + "&identity=" + this.identity + "&type=1" + "&mechanismName=" + this.keyword + "&mechanismTypeId=" + "&workType=" + "&orderType=" + "&page=" + this.currentPage + "&size=" + this.pageSize).then((res) => {
          let resultObj = res.data;
          this.title = "搜索结果";
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.workList != null && resultObj.data.workList.length > 0) {
              this.showData = 1;
              for (let i = 0, length = resultObj.data.workList.length; i < length; i++) {
                resultObj.data.workList[i].key = resultObj.data.workList[i].key.replace(/丨/g,"|").split("|").slice(0, 4);
              }

              this.workList = this.workList.concat(resultObj.data.workList);
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {
              if (this.loading) {
                this.loading = false;
                if (this.workList.length >= resultObj.data.workList.length) {
                  this.finished = true;
                }
              } else {
                this.showData = 2;
              }
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      search() {//搜索
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          this.$vux.toast.text("请输入搜索的企业名称或关键字", "middle");
          return;
        }
        let key = (new Date()).getTime();
        let flag = this.findArray(this.keyword, this.hisItem);
        if (flag) {//输入的内容localStorage有记录
          for (let i = 0; i < localStorage.length; i++) {
            if (this.keyword == localStorage.getItem(localStorage.key(i))) {
              localStorage.removeItem(localStorage.key(i));
            }
          }
          localStorage.setItem(key, this.keyword);
        } else {
          if (this.hisItem.length >= 10) {
            localStorage.removeItem(this.hisTime[0]);
            localStorage.setItem(key, this.keyword);
          } else {
            localStorage.setItem(key, this.keyword)
          }
        }
        //初始化
        this.currentPage = 1;
        this.PageSize = 20;
        this.workList = [];
        this.queryResult();
        this.init();
      },
      queryWork(cityName) {
        this.keyword = cityName;
        this.currentPage = 1;
        this.PageSize = 20;
        this.workList = [];
        this.queryResult();
      },
      openRecruit(id) {//招工详情
        this.$router.push({path: "/recruitdetail", query: {id: id}});
      },
      init() {//初始化
        this.hisTime = [];
        this.hisItem = [];
        for (let i = 0; i < localStorage.length; i++) {
          if (!isNaN(localStorage.key(i))) {
            this.hisItem.push(localStorage.getItem(localStorage.key(i)));
            this.hisTime.push(localStorage.key(i));
            this.showData = 0;
          }
        }
        this.hisItem = this.hisItem.reverse();
      },
      findArray(index, array) {
        for (let i = 0; i < array.length; i++) {
          if (array[i] === index) {
            return true;
          }
        }
      },
      clear() {//清除
        for (let i = 0; i < this.hisTime.length; i++) {
          localStorage.removeItem(this.hisTime[i]);
        }
        this.showData = 0;
        this.init();
      },
      del() {
        this.keyword = "";
        this.showIcon = false;
      },
    },
    watch: {
      keyword() {
        if (this.keyword == "" || this.keyword == undefined || this.keyword == null) {
          this.showIcon = false;
        } else {
          this.showIcon = true;
        }
        this.showData = 0;
      }
    },
    components: {
      workstar
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .search-wrap
    wh(100%, auto)
    .search-head
      position: fixed
      top: 0
      wh(100%, auto)
      z-index: 99
      .search-box
        display: flex
        align-items: center
        wh(100%, 1.2rem)
        background: rgba(60, 175, 255, 1)
        .search-con
          display: flex
          margin-left: 0.32rem
          align-items: center
          flex: 1
          wh(8.213rem, 0.8rem)
          background: rgba(255, 255, 255, 1)
          border-radius: 0.387rem
          .logo
            margin-left: 0.2rem
            margin-right: 0.2rem
            wh(0.4rem, 0.4rem)
          .search
            wh(80%, 0.5rem)
            line-height: 0.5rem
            size-color(0.373rem, rgba(174, 174, 174, 1))
          .clear
            margin-left: auto
            margin-right: 0.2rem
            wh(0.507rem, 0.507rem)
        .search-btn
          margin-left: 0.307rem
          margin-right: 0.347rem
          wh(1.307rem, 0.8rem)
          line-height: 0.8rem
          size-color(0.427rem, rgba(255, 255, 255, 1))
          text-align: center
      .title-box
        display: flex
        align-items: center
        padding-left: 0.32rem
        wh(100%, 0.8rem)
        size-color(0.347rem, rgba(153, 153, 153, 1))
        background: #F2F2F2

    .work-van
      position: absolute
      top: 2rem
      wh(100%, auto)
      .work-box
        display: flex
        flex-direction: column
        wh(100%, auto)
        .work-list
          .work-con
            display: flex
            wh(100%, 3.707rem)
            border-bottom: 0.027rem solid rgba(245, 245, 245, 1)
            overflow: hidden
            .logo-box
              position: relative
              margin-top: 0.533rem
              margin-left: 0.28rem
              wh(2.133rem, 1.6rem)
              .logo
                wh(100%, 100%)
                border-radius: 0.16rem
            .title
              position: absolute
              bottom: 0
              fj(center, center)
              wh(100%, 0.48rem)
              background: rgba(0, 0, 0, 0.7)
              border-bottom-left-radius: 0.16rem
              border-bottom-right-radius: 0.16rem
              size-color(0.333rem, rgba(255, 255, 255, 1))
            .company-box
              margin-left: 0.28rem
              margin-top: 0.533rem
              .name
                size-color(0.4rem, rgba(51, 51, 51, 1))
                font-weight: 500
                margin-bottom: 0.173rem
              .star
                margin-bottom: 0.267rem
              .key-box
                display: flex
                align-items: center
                margin-bottom: 0.32rem
                .key
                  padding: 0.053rem 0.107rem
                  margin-right: 0.1rem
                  background: rgba(245, 246, 247, 1)
                  border-radius(0.053rem)
                  size-color(0.293rem, rgba(128, 128, 128, 1))
                  &:last-child
                    margin-right: 0
              .work-name
                margin-bottom: 0.28rem
                size-color(0.373rem, rgba(60, 175, 255, 1))
                font-weight: 500
              .score-box
                display: flex
                align-items: center
                size-color(0.32rem, rgba(153, 153, 153, 1))
                .full
                  margin-left: 0.15rem
                  padding: 0.04rem 0.107rem
                  line-height: 0.373rem
                  background: rgba(255, 142, 89, 1)
                  border-radius(0.053rem)
                  size-color(0.293rem, rgba(255, 255, 255, 1))
                  font-weight: 500
            .num-box
              display: flex
              flex-direction: column
              align-items: flex-end
              margin-top: 0.533rem
              margin-left: auto
              margin-right: 0.28rem
              position: relative
              .fee
                display: flex
                align-items: center
                position: relative
                .fee-pic
                  position: absolute
                  left: -0.427rem
                  wh(0.853rem, 0.853rem)
                .fee-money
                  text-align: center
                  line-height: 0.56rem
                  wh(1.733rem, 0.56rem)
                  background: rgba(255, 242, 217, 1)
                  border: 0.027rem solid rgba(255, 210, 145, 1)
                  border-top-right-radius: 0.267rem
                  border-bottom-right-radius: 0.267rem
                  size-color(0.427rem, rgba(255, 148, 69, 1))
                  font-weight: 500
              .lend
                fj(center, center)
                position: absolute
                right: 0
                bottom: 0.213rem
                wh(1.173rem, 0.427rem)
                border: 0.013rem solid rgba(60, 175, 255, 1)
                border-radius(0.027rem)
                size-color(0.293rem, rgba(60, 175, 255, 1))
              .money
                position: absolute
                right: 0
                top: 1.933rem
                width: 3.2rem
                text-align: right
                size-color(0.373rem, rgba(255, 89, 89, 1))
                font-weight: 500

    .empty-wrap
      fj(center, center)
      wh(100%, 100%)
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        wh(4.773rem, auto)
        .img-box
          wh(100%, 4.773rem)
          .empty
            wh(100%, 100%)
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          size-color(0.373rem, rgba(68, 68, 68, 1))
    .content-box
      position: fixed
      top: 2rem
      padding-left: 0.32rem
      wh(100%, auto)
      overflow: hidden
      .content
        display: flex
        align-items: center
        wh(100%, 1.173rem)
        size-color(0.4rem, rgba(51, 51, 51, 1))
        border-bottom: 0.013rem solid rgba(238, 238, 238, 1)
        &:last-child
          border: none
      .clear-box
        display: flex
        align-items: center
        wh(100%, 1.173rem)
        border-top: 0.013rem solid rgba(238, 238, 238, 1)
        .clear-con
          display: flex
          align-items: center
          .clear
            padding-right: 0.2rem
            wh(0.32rem, 0.413rem)
          .title
            size-color(0.4rem, rgba(51, 51, 51, 1))

</style>
